<template>
    <div id="addFill">
        <div class="jx-title-box">
            <div class="fl jx-blueStreak"></div>
            <div class="fl jx-titleText">整体教学统计</div>
        </div>
        <div class="jx-part">
            <div class="jx-part-left">
                 <el-row>
                    <el-col :span="12">
                        <span class="col-num">00000</span>
                        <span class="col-text">姓名</span>
                    </el-col> 
                    <el-col :span="12">
                        <span class="col-num">00000</span>
                        <span class="col-text">工号</span>
                    </el-col>  
                </el-row>
            </div>
            <div class="jx-part-right">
                <el-row>
                    <el-col :span="8">
                        <span class="col-num">00000</span>
                        <span class="col-text">教授课程数量</span>
                    </el-col> 
                    <el-col :span="8">
                        <span class="col-num">00000</span>
                        <span class="col-text">制作课程数量</span>
                    </el-col> 
                    <el-col :span="8">
                        <span class="col-num">00000</span>
                        <span class="col-text">教授学生数量</span>
                    </el-col>  
                </el-row>
            </div>
        </div>
        <div class="jx-study" style="margin-top：30px">
           <div class="teach-box statistics">
                <el-row>
                    <el-col :span="6">
                        <span class="col-num">1214-08-09</span>
                        <span class="col-text">注册时间</span>
                    </el-col> 
                    <el-col :span="6">
                       <div class="fl" style="width:95px;">
                           <PieEcharts :id='levalid' :color='levalcolor'  :datalist='leval'  style="width:100%;;height:70px; "></PieEcharts>
                        </div>
                        <div class="fl jx-pass">
                             <p class="jx-pass-num">{{''+leval == 0 ? (0+'%') : leval+'%'}}</p>
                             <p class="jx-pass-over">学生平均出勤率</p>
                         </div>
                    </el-col> 
                    <el-col :span="6">
                        <div class="fl" style="width:95px;">
                             <PieEcharts :id='passoverid' :color='passovercolor'  :datalist='passover'  style="width:100%;;height:70px; "></PieEcharts> 
                        </div>
                        <div class="fl jx-pass">
                             <p class="jx-pass-num">{{''+passover == 0 ? (0+'%') : passover+'%'}}</p>
                             <p class="jx-pass-over">学生考试及格率</p>
                         </div>
                    </el-col> 
                    <el-col :span="6">
                        <div class="fl" style="width:95px;">
                            <PieEcharts :id='passsubmitid' :color='passsubmitcolor'  :datalist='passsubmit'  style="width:100%;;height:70px; "></PieEcharts>
                        </div>
                        <div class="fl jx-pass">
                             <p class="jx-pass-num">{{''+passsubmit == 0 ? (0+'%') : passsubmit+'%'}}</p>
                             <p class="jx-pass-over">学生随堂练习提交率</p>
                         </div>
                    </el-col> 
                    <el-col :span="6">
                        <div class="fl" style="width:95px;">
                             <PieEcharts :id='passreportid' :color='passreportcolor'  :datalist='passreport'  style="width:100%;;height:70px; "></PieEcharts>
                        </div>
                        <div class="fl jx-pass">
                             <p class="jx-pass-num">{{''+passreport == 0 ? (0+'%') : passreport+'%'}}</p>
                             <p class="jx-pass-over">学生实验报告提交率</p>
                         </div>
                    </el-col> 
                </el-row>
            </div>
        </div>
        <!-- <div class="statistics-analysis-tip" v-if="projectStatisticsVOList.length == 0">
                暂无统计分析
        </div> -->
           <div class="jx-part2"  v-for="(item, index) in projectStatisticsVOList"  :key='index' :class=" index%2 == 0 ? 'item-first' : 'item-second'">
            <div class="jx-title-box fl">
                <div class="fl jx-blueStreak"></div>
                <div class="fl jx-titleText">整体教学统计</div>
            </div>
            <div class="jx-title-box fr">
                <router-link :to="{}" class="colors">
                     班级详情<i class="iconfont icon-guanli"></i>
                </router-link>    
            </div>
             <div class="analysis-boxs"  >
                <el-row>
                    <el-col :span="6">
                        <span class="col-num">00000</span>
                        <span class="col-text">学习人数</span>
                    </el-col> 
                     <el-col :span="6">
                         <div class="fl jx-progess">
                             <el-progress type="circle" :percentage="item.pingjun" :color="index%2 == 0 ?  '#42bbab' : '#1277eb'"  :stroke-width='9' :width='55' :show-text=false ></el-progress>
                         </div>
                         <div class="fl jx-pass">
                            <p class="jx-pass-num">{{''+item.pingjun == 0 ? (0+'%') : item.pingjun+'%'}}</p>
                            <p class="x-pass-over">平均出勤率</p>
                         </div>
                    </el-col> 
                     <el-col :span="6">
                         <div class="fl jx-progess">
                             <el-progress type="circle" :percentage="item.auto" :color="index%2 == 0 ?  '#42bbab' : '#1277eb'" :stroke-width='9' :width='55' :show-text=false ></el-progress>
                         </div>
                         <div class="fl jx-pass">
                            <p class="jx-pass-num">{{''+item.auto == 0 ? (0+'%') : item.auto+'%'}}</p>
                            <p class="x-pass-over">平均出勤率</p>
                         </div>
                    </el-col>
                      <el-col :span="6">
                         <div class="fl jx-progess">
                             <el-progress type="circle" :percentage="item.aa" :color="index%2 == 0 ?  '#42bbab' : '#1277eb'"  :stroke-width='9' :width='55' :show-text=false ></el-progress>
                         </div>
                         <div class="fl jx-pass">
                            <p class="jx-pass-num">{{''+item.aa == 0 ? (0+'%') : item.aa+'%'}}</p>
                            <p class="x-pass-over">平均出勤率</p>
                         </div>
                    </el-col>
                       <el-col :span="6">
                         <div class="fl jx-progess">
                             <el-progress type="circle" :percentage="item.bb" :color="index%2 == 0 ?  '#42bbab' : '#1277eb'"   :stroke-width='9' :width='55' :show-text=false ></el-progress>
                         </div>
                         <div class="fl jx-pass">
                            <p class="jx-pass-num">{{''+item.bb == 0 ? (0+'%') : item.bb+'%'}}</p>
                            <p class="x-pass-over">平均出勤率</p>
                         </div>
                    </el-col>
                    <el-col :span="6" >
                        <span class="col-num">00000</span>
                        <span class="col-text">问题交流回答数</span>
                    </el-col> 
                     <el-col :span="6" >
                        <span class="col-num">00000</span>
                        <span class="col-text">实验平均时长</span>
                    </el-col> 
                     <el-col :span="6" >
                        <span class="col-num">00000</span>
                        <span class="col-text">实验平均时长</span>
                    </el-col> 
                     <el-col :span="6" >
                        <span class="col-num">00000</span>
                        <span class="col-text">学生随堂回答次数</span>
                    </el-col> 
                      <el-col :span="6" >
                        <span class="col-num">00000</span>
                        <span class="col-text">学生随堂回答次数</span>
                    </el-col> 
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import PieEcharts from '@/components/PieEcharts.vue'
    export default {
        components: {
            PieEcharts
        },
        data() {
            return {
                //学生平均出勤率
                leval:10,
                levalid:'levalratio',
                levalcolor:'#13c2c2',
                 //学生考试及格率
                passover:20,
                passoverid:'overratio',
                passovercolor:'#9170de',
                 //学生随堂练习提交率
                passsubmit:30,
                passsubmitid:'submitratio',
                passsubmitcolor:'#5689f2',
                 //学生实验报告提交率
                passreport:40,
                passreportid:'reportratio',
                passreportcolor:'#f07f9b',
                //统计分析
                projectStatisticsVOList:[
                    {pingjun:20, auto:30,aa:60,bb:80},
                    {pingjun:20, auto:30,aa:60,bb:80},
                ],
                

            }
        },
        init(){
          
        },
        methods:{
            
        }
    }
</script>
<style scoped>
   .item-first .frist{
      color: blueviolet
   }
    .item-second .second{
    color: aqua
   }
</style>
<style lang="scss" scoped>
  @import "./../../../styles/layout/color_variables";
   #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .jx-title-box{
        color:$blue;
        line-height: 15px;
        text-align: left;
        height: 15px;
        font-size: $fs16;
        padding: 10px 0;
        .jx-blueStreak{
            background: $blue;
            width: 2px;
            float: left;
            height: 15px;
            padding: 0;
        }
        .jx-titleText{
            padding-left:40px;
            width: auto;
        }
   }
    .jx-part{
        box-sizing: border-box;
        overflow: hidden;
        .jx-part-left{
            float: left;
            width: 350px;
            background: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            padding: 20px 40px;
            line-height: 30px;
              .el-row .el-col{
                text-align: center;
                width: 50%;
                border-right: solid 1px $border-gray;
                &:last-child{
                   border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
        }
        .jx-part-right{
            float: right;
            margin-left: 20px;
            width: 650px;
            background: #fff;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            padding: 20px 40px;
            line-height: 30px;
               .el-row .el-col{
                text-align: center;
                width: 33.3%;
                border-right: solid 1px $border-gray;
                &:last-child{
                   border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24
            }
            .col-text{
                color: $table-gray
            }
         }
    }
   .jx-study{
        clear: both;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        border-radius: 5px;
        margin-top: 30px;
        padding: 20px 10px;
       .statistics{
            .el-row .el-col{
                text-align: center;
                width: 20%;
                border-right: solid 1px $border-gray;
                &:last-child{
                    border-right: none
                }
            }
            .col-num{
                display: block;
                color: #1277eb;
                overflow: hidden;
                margin-bottom: 10px;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24;
                margin-top: 10px;
            }
            .col-text{
                color: $table-gray
            }
             .jx-pass{
                    margin-top:10px;
                    text-align: left;
                    .jx-pass-num{
                       color: #13c2c2;
                       font-size: $fs24
                    }
                    .jx-pass-over{
                       color: $table-gray;
                       margin-top: 10px;
                    }
                }
        }
   }
   .statistics-analysis-tip{
       text-align: center;
       padding: 30px 0
   }
   .item-first{
       .jx-title-box{
        color:$blue;
        line-height: 15px;
        text-align: left;
        height: 15px;
        font-size: $fs16;
        padding: 25px 0;
            .colors{
                color:$table-gray
            }
            .jx-blueStreak{
                background: $blue;
                width: 2px;
                float: left;
                height: 15px;
                padding: 0;
            }
            .jx-titleText{
                padding-left:40px;
                width: auto;
            }
        }
        .analysis-boxs{
            clear: both;
            background: #fff;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            margin-top: 30px;
            padding: 20px 10px;
             .el-row .el-col{
                text-align: center;
                width: 20%;
                border-right: solid 1px $border-gray;
                margin: 20px 0;
                &:nth-child(5n){
                   border-right: none
                }
                .jx-pass{
                    text-align: left;
                    margin-left: 30px;
                    .jx-pass-num{
                        font-size: $fs24;
                        margin-bottom: 10px;
                        color:#42bbab
                    }
                }
                .jx-progess{
                    margin-left: 30px;
                   
                }
                
            }
            .col-num{
                display: block;
                color: #42bbab;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24;
                margin-bottom: 10px;
            }
            .col-text{
                color: $table-gray
            }
           
        }
   }
    .item-second{
       .jx-title-box{
        color:$blue;
        line-height: 15px;
        text-align: left;
        height: 15px;
        font-size: $fs16;
        padding: 25px 0;
            .colors{
                color:$table-gray
            }
            .jx-blueStreak{
                background: $blue;
                width: 2px;
                float: left;
                height: 15px;
                padding: 0;
            }
            .jx-titleText{
                padding-left:40px;
                width: auto;
            }
        }
        .analysis-boxs{
            clear: both;
            background: #fff;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            border-radius: 5px;
            margin-top: 30px;
            padding: 20px 10px;
             .el-row .el-col{
                text-align: center;
                width: 20%;
                border-right: solid 1px $border-gray;
                margin: 20px 0;
                &:nth-child(5n){
                   border-right: none
                }
                .jx-pass{
                    text-align: left;
                    margin-left: 30px;
                    .jx-pass-num{
                        font-size: $fs24;
                        margin-bottom: 10px;
                        color:#1277eb;
                    }
                }
                .jx-progess{
                    margin-left: 30px;
                   
                }
                
            }
            .col-num{
                display: block;
                color: #42bbab;
                overflow: hidden;
                text-overflow:ellipsis;
                text-align: center;
                font-size: $fs24;
                margin-bottom: 10px;
                color:#1277eb;
            }
            .col-text{
                color: $table-gray
            }
           
        }
   }
  
}
</style>